<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <el-row :gutter="obj.gutter">
            <el-col :span="24/obj.columns" v-for="(item,index) in obj.imgTextBox" :key="index">
                <el-card class="mt10" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                    <div class="product-image" @click="goClick(item.httpUrl)">
                        <img class="img" :style="{height:obj.imgHeight+'px'}" :src="item.imgUrl">
                        <div class="info">
                            <h2 class="info-title" v-html="item.title"/>
                            <div class="info-desc" v-html="item.desc"/>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'ThreeColumns2',
    mixins: [animate]

}
</script>
<style lang="scss" scoped>
    .content-wrapper{
        .product-image {
            transition: all 0.3s ease-out;
            position: relative;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }

        .product-image img {width: 100%;display: block;height: 240px;}
        .product-image .info {
            background: rgba(0, 0, 0, 0.6);
            transition: all 0.3s ease-out;
            transform: translateY(100%);
            position: absolute;
            line-height: 1.5;
            text-align: left;
            font-size: 100%;
            color: #FFF;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            padding: 15px;
            overflow: hidden;
        }

        .product-image .info .info-title {padding: 15px 0;}
        .product-image:hover .info{transform: translateY(0);}

        .product-image:hover img {transition: all 0.8s ease-out;}
        .product-image:hover img {transform: scale(1.3, 1.3);}
    }
</style>

